home *** CD-ROM | disk | FTP | other *** search
/ Risc World 3 / Risc World 3.iso / SOFTWARE / ISSUE4 / MAKE_HTML / HTML_Link / !HTM_link / !Help < prev    next >
Text File  |  2003-01-27  |  9KB  |  188 lines
  1.  
  2.                         !HTM_link
  3.                         ----------
  4.  
  5.               Copyright © David Holden 2002
  6.  
  7. This started as a simple  program to insert the <img.... etc. tagline
  8. for a Sprite, JPEG or GIF into an HTML file. It then grew to enable the
  9. image to become a link to another file, or image, or a remote URL, or to
  10. just insert a text link to another file or URL. Basically, it inserts
  11. images or image or text links to local or remote files.
  12.  
  13. The iconbar menu has two main items, 'Image' and 'Link'. 
  14.  
  15. 'Image' will insert links to images, or links from images (ie. click on
  16. the image to link to another file). It is therefore used to create both
  17. links and to simply insert a passive image into the page.
  18.  
  19. 'Link' just creates a textual link.
  20.  
  21. Clicking SELECT on the iconbar icon is equivalent to selecting 'Image'
  22. and clicking ADJUST is equivalent to selecting 'Link'.
  23.  
  24.         Inserting a Text link
  25.  
  26. This is the simplest, so I'll deal with it first.
  27.  
  28. Click ADJUST on the iconbar icon or select 'Link' from the menu and the
  29. Link window will open.
  30.  
  31. The top item, labelled 'Source', is the source file you're inserting the
  32. link into. Drag this file to the icon and it's full pathname will
  33. appear.
  34.  
  35. The second item, labelled 'Link to', is the file you want to link to.
  36. This can be another HTML file, a text file, image (sprite, JPEG, GIF,
  37. etc.) or some sort of archive. It can also be a remote URL (see below).
  38. Assuming it's a local file drag the file or image you want to link to
  39. into the second icon icon labelled 'Link to' and its name will appear. 
  40.  
  41. Before you can create the link you will need some text in the third
  42. icon, 'Link text'. This is the text the reader will see highlighted in
  43. their browser window and which they click on to make the link.
  44.  
  45. Now you need to load the HTML file where you want the link to appear
  46. into an editor. This can be Zap, StrongEd, Edit, or whatever you use to
  47. write or edit your HTML. Place the caret/cursor exactly where you want
  48. the link to appear and click on 'Insert'. The link will then appear in
  49. your editor.
  50.  
  51.         Remote links
  52.  
  53. Linking to a remote URL, that is, a www address, is similar. Obviously
  54. you can't drag the file to the 'Link to' icon, so click on the 'www
  55. link' button and the 'Link to' icon will be cleared and 'www.' will be
  56. placed in it ready for you to enter the address you want to link to.
  57. Enter the link (for example, to link to the APDL web site you would just
  58. enter 'apdl.co.uk' after the 'www.') and click on 'Insert' and the text
  59. will appear in your editor just as before.
  60.  
  61. If 'www.link' is selected when you drag a local file to the 'Link to'
  62. icon then it will be de-selected automatically and 'Local link'
  63. selected.
  64.  
  65.         Inserting an Image link
  66.  
  67. This is similar to inserting a textual link but it's a bit more
  68. complicated as there are more options to consider.
  69.  
  70. Click SELECT on the iconbar icon or select 'Image' from the menu and the
  71. Image window will open.
  72.  
  73. Drag the HTML file you want the link to be inserted into to the top
  74. icon, labelled 'Source', and the filename will appear.
  75.  
  76. The top icons in the Image and Link widows are cross-linked so that a
  77. file dragged to one will also appear in the other. This saves you having
  78. to repeatedly drag a source file to the windows if you are inserting
  79. both types of link into the same file. (See the section 'Relative links'
  80. later for more about this).
  81.  
  82. Now drag the the image you want to insert the tag for to the second
  83. icon, labelled 'Image', where it's name will appear. The width and
  84. height will be read and show in their icons. You could edit these if you
  85. want to expand or contract the image (and if you know what you're
  86. doing!).
  87.  
  88. It's possible that a JPEG's size may not be correctly interpreted. This
  89. will not happen if it's a straightforward image that has been 'passed
  90. through' a RISC OS program such as ChangeFSI but there could be problems
  91. if it has been created in a program on a Mac or PC. If the program isn't
  92. sure of the dimensions it will put a '?' after them. If the numbers look
  93. about right (and they usually will) they almost certainly are.
  94.  
  95. If you want your image to be centred in the browser window, which would
  96. normally be the case if it's an large picture or illustration, then make
  97. sure 'Cenre image' is ticked. This will wrap the image link in <CENTER>
  98. . . . </CENTER> tags.
  99.  
  100. The 'Align text' options at the bottom left hand corner of the window
  101. are used to define the position of text following the image. In theory
  102. 'Top' should see the text continuing from the top of the image, so if
  103. the image was left-aligned the text would appear to 'flow around' it on
  104. the right hand side. Most browsers don't implement this, so you are
  105. advised not to use it, except for a short caption. 'Middle' and 'Bottom'
  106. mean that the following text should continue from either the vertical
  107. centre or level with the bottom edge of the picture. This is normally
  108. used to place a small caption to the right of the picture. 'None' is the
  109. default.
  110.  
  111. If you have not selected 'Centre image' or any of the text alignment
  112. options (that is, 'None' is selected) then it is a good idea to select
  113. '<BR> after image'. this places an end of line tag after the image to
  114. ensure that following text (or image) starts on a new line below the
  115. image. Otherwise it may begin to the right of the image, which might
  116. look a bit strange.
  117.  
  118. If you want to have any alternative text for your image then enter it
  119. into the icon labelled 'Alt text'. This is text which will appear in a
  120. browser if the image can't be found or in a text only browser or if
  121. images are turned off. Most browsers will also show this text while
  122. waiting for the image to be downloaded.
  123.  
  124. When you have set all the options as you want place the caret in your
  125. source file where you want the image to appear and click on 'Insert'.
  126.  
  127.         Using an image as a link          If you want the image to be a
  128. link to another file (or image) then proceed exactly as above but also
  129. drag the file you want to link to to the third ('Link to') icon. It's
  130. filename will appear there and the appropriate information will be
  131. included in the tag inserted into your file.
  132.  
  133. As with text links you can use an image to link to a remote URL. Click
  134. on 'www.link' and 'www.' will appear in the Link to' icon ready for you
  135. to type the www address you want to link to.
  136.  
  137.         Image borders
  138.  
  139. If you want your image to have a border the width of this in pixels can
  140. be entered into the 'Border width' writable icon.
  141.  
  142. Where an image is not used to link to another file then it will not have
  143. a border unless one is specified. However, if it is used as a link then,
  144. even where no border is specified, most browsers will place a 1 pixel
  145. wide border around the image. This might not be what you want, so in
  146. this case it is necessary to specify a '0' width border, which is why
  147. the default width in this icon is '0'. 
  148.  
  149. If there is no link from your image and you don't want it to have a
  150. border you can delete the '0' to leave this icon blank. No 'border' tag
  151. will then be used.
  152.  
  153. 'Vspace' and 'Hspace' are used to place an 'invisible border' around an
  154. image. This will ensure that text or other images above and below or to
  155. the left and right of an image leave a gap.
  156.  
  157.         Clear All and Clear Part
  158.  
  159. The two 'Clear' buttons have different effects. 'Part' blanks the 'Image
  160. File', 'Alt text' and 'Link to' icons but leaves 'Vspace', 'Hspace' and
  161. 'Border Width' so if you are inserting a series of images with similar
  162. characteristics (eg. several aligned buttons) you don't have to re-write
  163. these values. 'All' also clears these icons. Neither Clear button wipes
  164. the 'Source file' icon as it is assumed that you will either be
  165. inserting more data into the same file and if not it will automatically
  166. be replaced with any new filename you drag there.
  167.  
  168.         Relative links
  169.  
  170. The reason the Source File has to be dragged to the top icons is so that
  171. the program will know where it is and so can work out the relative
  172. positions of the Image file and/or links. The program should cope with
  173. links to files which aren't in the same directory, whether they're in a
  174. sub-directory or a higher level directory. It will try to trace the two
  175. paths back to a convergent point to create a relative link.
  176.  
  177. In fact, once you've established the path to the source file by dragging
  178. it to the window if you want to insert links into a different HTML file
  179. which is in the same directory as the first file you don't need to drag
  180. the second file. It's the POSITION of the HTML file that matters, not
  181. the name of the file itself.
  182.  
  183. Remember that the link will be inserted wherever you have placed the
  184. caret when you click on 'Insert'. This has nothing to do with the
  185. filename in the 'Source' icon, that is just used as the 'anchor point'
  186. for relative links.
  187.  
  188.